<!doctype html>
<html>
	<head>
		<meta charset="UTF-8" />
		<title>{{.install_name}}</title>
		<link rel="stylesheet" href="/static/css/install.css" />
	</head>
	<body>
		<div class="wrap">
			<div class="header">
				<h1 class="header-title">{{.install_name}}</h1>
				<div class="header-install">&nbsp;&nbsp;安装向导</div>
				<div class="header-version">版本：{{.version}}</div>
			</div>
			<div class="step">
				<ul>
					<li>{{.step_html}}</li>
				</ul>
			</div>
<!-- header -->			

	<form id="J_install_form" action="/install" method="post">
		<input type="hidden" name="action" value="install" />
		<div class="section">
			<div class="main server">
				<table width="100%">
					<tr>
						<td class="td1" width="100">数据库信息</td>
						<td class="td1" width="200">&nbsp;</td>
						<td class="td1">&nbsp;</td>
					</tr>
					
					<tr>
						<td class="tar">数据库服务器：</td>
						<td><input type="text" name="dbhost" id="dbhost" value="127.0.0.1" class="input"></td>
						<td><div id="J_install_tip_dbhost"><span class="gray">数据库服务器地址，一般为localhost</span></div></td>
					</tr>
					<tr>
						<td class="tar">数据库端口：</td>
						<td><input type="text" name="dbport" id="dbport" value="3306" class="input"></td>
						<td><div id="J_install_tip_dbport"><span class="gray">数据库服务器端口，一般为3306</span></div></td>
					</tr>
					<tr>
						<td class="tar">数据库用户名：</td>
						<td><input type="text" name="dbuser" id="dbuser" value="root" class="input"></td>
						<td><div id="J_install_tip_dbuser"></div></td>
					</tr>
					<tr>
						<td class="tar">数据库密码：</td>
						<td><input type="text" name="dbpw" id="dbpw" value="" class="input" autoComplete="off"></td>
						<td><div id="J_install_tip_dbpw"></div></td>
					</tr>
					<tr>
						<td class="tar">测试数据库连接：</td>
						<td><button type="button" class="btn" onclick="TestDbPwd()">测试连接</button></td>
						<td><span id="show_msg" style="display:none;color:red;"></span></td>
					</tr>
					
					<tr>
						<td class="tar">数据库名：</td>
						<td><input type="text" name="dbname" id="dbname" value="" class="input"></td>
						<td><div id="J_install_tip_dbname"></div></td>
					</tr>
					
					<!--<tr>
						<td class="tar">数据库表前缀：</td>
						<td><input type="text" name="dbprefix" id="dbprefix" value="" class="input"></td>
						<td><div id="J_install_tip_dbprefix"><span class="gray">建议使用默认，同一数据库安装多个ShuipFCMS时需修改</span></div></td>
					</tr>-->
				</table>
				<table width="100%">
					<tr>
						<td class="td1" width="100">网站配置</td>
						<td class="td1" width="200">&nbsp;</td>
						<td class="td1">&nbsp;</td>
					</tr>
					<tr>
						<td class="tar">网站名称：</td>
						<td><input type="text" name="sitename" id="sitename" value="GreenBeeAdmin后台管理系统" class="input"></td>
						<td><div id="J_install_tip_sitename"></div></td>
					</tr>
					<tr>
						<td class="tar">网站域名：</td>
						<td><input type="text" name="siteurl" value="http://127.0.0.1:8080" id="siteurl" class="input" autoComplete="off"></td>
						<td><div id="J_install_tip_siteurl"><span class="gray">请不要以“/”结尾</span></div></td>
					</tr>
					<!--<tr>
						<td class="tar">关键词：</td>
						<td><input type="text" name="sitekeywords" value="<?php echo $config['siteKeywords'] ?>" class="input" autoComplete="off"></td>
						<td><div id="J_install_tip_sitekeywords"></div></td>
					</tr>
					<tr>
						<td class="tar">描述：</td>
						<td><input type="text" name="sitedescription" id="sitedescription" class="input" value="GreenBeeAdmin是一款基于beego2.0和layuimini开发的软件后台管理系统。它提供了一套完整的解决方案，并采用MVC三层架构，基于角色的RBAC权限管理，帮助企业快速搭建和管理自己的后台管理系统。非常适合golang初学者学习使用。"></td>
						<td><div id="J_install_tip_siteinfo"></div></td>
					</tr>-->
					<tr>
						<td class="tar">系统全局加密key</td>
						<td><input type="text" name="system_key" id="system_key" maxlength="16" value="12345678abcdefgh" class="input" autoComplete="off"></td>
						<td><div id="J_install_tip_system_key"></div></td>
					</tr>
					<!--<tr>
						<td class="tar">附件上传的目录：</td>
						<td><input type="text" name="uploaddir" class="input" value="<?php echo $config['uploaddir']?>"></td>
						<td><div id="J_install_tip_uploaddir"></div></td>
					</tr>-->
				</table>
				<table width="100%">
					<tr>
						<td class="td1" width="100">创始人信息</td>
						<td class="td1" width="200">&nbsp;</td>
						<td class="td1">&nbsp;</td>
					</tr>
					<tr>
						<td class="tar">管理员帐号：</td>
						<td><input type="text" name="manager" id="manager" value="admin" class="input"></td>
						<td><div id="J_install_tip_manager"></div></td>
					</tr>
					<tr>
						<td class="tar">密码：</td>
						<td><input type="text" name="manager_pwd" id="J_manager_pwd" class="input" autoComplete="off"></td>
						<td><div id="J_install_tip_manager_pwd"></div></td>
					</tr>
					<tr>
						<td class="tar">重复密码：</td>
						<td><input type="text" name="manager_ckpwd" class="input" autoComplete="off"></td>
						<td><div id="J_install_tip_manager_ckpwd"></div></td>
					</tr>
					<!--<tr>
						<td class="tar">Email：</td>
						<td><input type="text" name="manager_email" class="input" value=""></td>
						<td><div id="J_install_tip_manager_email"></div></td>
					</tr>-->
				</table>
				<div id="J_response_tips" style="display:none;"></div>
			</div>
		</div>
		<div class="btn-box">
			<a href="/install?step=2" class="btn">上一步</a>
			<button type="submit" class="btn btn_submit J_install_btn">创建数据</button>
		</div>
	</form>
	<script src="/static/js/install/jquery.js"></script> 
	<script src="/static/js/install/validate.js"></script> 
	<script>
		function TestDbPwd(){
		$("#show_msg").css("display","none")
		$.ajax({
			type: "POST",
			dataType:'json',
			url: "/install?action=test_db",
			data: {'dbhost':$('#dbhost').val(),'dbuser':$('#dbuser').val(),'dbpw':$('#dbpw').val(),'dbname':$('#dbname').val(),'dbport':$('#dbport').val()},
			success: function(data){
				if(data.code != 200){
					$('#'+ data.type).focus();
				}
				if(data.code == 200 && data.data != ""){
					$("#show_msg").html(data.data).css("display","block")
				}
				alert(data.msg);
			},
			error:function(){
				alert('数据库链接配置失败');
				$('#dbpw').focus();
			}
		});
	}
	$(function(){
		//聚焦时默认提示
		var focus_tips = {
			dbhost : '数据库服务器地址，一般为localhost',
			dbport : '数据库服务器端口，一般为3306',
			dbuser : '请输入数据库用户名',
			dbpw : '请输入数据库密码',
			dbname : '请输入数据库名',
			//dbprefix : '建议使用默认，同一数据库安装多个时需修改',
			manager : '创始人帐号，拥有站点后台所有管理权限',
			manager_pwd : '请输入管理员密码',
			manager_ckpwd : '请再次输入管理员密码',
			sitename : '',
			siteurl : '请不要以“/”结尾',
			//sitekeywords : '',
			siteinfo : '',
			system_key : '（安全起见，强烈建议修改）修改时请保持16位数字+字母组合',
			//manager_email : ''
		};


		var install_form = $("#J_install_form"),
			response_tips = $('#J_response_tips');				//后端返回提示

		//validate插件修改了remote ajax验证返回的response处理方式；增加密码强度提示 passwordRank
		install_form.validate({
			//debug : true,
			//onsubmit : false,
			errorPlacement: function(error, element) {
				//错误提示容器
				$('#J_install_tip_'+ element[0].name).html(error);
			},
			errorElement: 'span',
			//invalidHandler : , 未验证通过 回调
			//ignore : '.ignore' 忽略验证
			//onkeyup : true,
			errorClass : 'tips_error',
			validClass		: 'tips_error',
			onkeyup : false,
			focusInvalid : false,
			rules: {
				dbhost: {
					required	: true
				},
				dbport:{
					required	: true
				},
				dbuser: {
					required	: true
				},
				dbname: {
					required	: true
				},
				/*dbprefix : {
					required	: true
				},*/
				manager: {
					required	: true
				},
				system_key: {
					required	: true
				},
				manager_pwd: {
					required	: true
				},
				manager_ckpwd: {
					required	: true,
					equalTo : '#J_manager_pwd'
				},
				/*manager_email: {
					required	: true,
					email : true
				}*/
			},
			highlight	: false,
			unhighlight	: function(element, errorClass, validClass) {
				var tip_elem = $('#J_install_tip_'+ element.name);

					tip_elem.html('<span class="'+ validClass +'" data-text="text"><span>');

			},
			onfocusin	: function(element){
				var name = element.name;
				$('#J_install_tip_'+ name).html('<span data-text="text">'+ focus_tips[name] +'</span>');
				$(element).parents('tr').addClass('current');
			},
			onfocusout	:	function(element){
				var _this = this;
				$(element).parents('tr').removeClass('current');
				
				if(element.name === 'email') {
					//邮箱匹配点击后，延时处理
					setTimeout(function(){
						_this.element(element);
					}, 150);
				}else{
				
					_this.element(element);
					
				}
				
			},
			messages: {
				dbhost: {
					required	: '数据库服务器地址不能为空'
				},
				dbport:{
					required	: '数据库服务器端口不能为空'
				},
				dbuser: {
					required	: '数据库用户名不能为空'
				},
				dbname: {
					required	: '数据库名不能为空'
				},
				/*dbprefix : {
					required	: '数据库表前缀不能为空'
				},*/
				manager: {
					required	: '管理员帐号不能为空'
				},
				system_key: {
					required	: '全局加密key不能为空'
				},
				manager_pwd: {
					required	: '密码不能为空'
				},
				manager_ckpwd: {
					required	: '请再次输入管理员密码',
					equalTo : '两次输入的密码不一致。请重新输入'
				},
				/*manager_email: {
					required	: 'Email不能为空',
					email : '请输入正确的电子邮箱地址'
				}*/
			},
			submitHandler:function(form) {
				//创建数据库，更新数据库的配置信息
				//form.submit();
				//参数验证
				var system_key = $("#system_key").val();
				const regex = /^[a-zA-Z0-9]{16}$/;
				//return ;
				if(!regex.test(system_key)){
					alert("系统全局加密key,必需是16位字符的字母或数字");
					return false;
				}
				$.ajax({
					type: "POST",
					dataType:'json',
					url: "/install?action=install",
					data: {'dbhost':$('#dbhost').val(),'dbuser':$('#dbuser').val(),'dbpw':$('#dbpw').val(),'dbname':$('#dbname').val(),'dbport':$('#dbport').val(),'sitename':$("#sitename").val(),'siteurl':$("#siteurl").val(),'manager':$("#manager").val(),'J_manager_pwd':$("#J_manager_pwd").val(),"system_key":$("#system_key").val()},
					success: function(data){
						//数据库创建成功
						if(data.code == 200 ){
							alert(data.msg);
							//跳转到安装页面
							window.location.href = "/install?step=4&config_params="+encodeURIComponent(data.data)
						}else{
							alert(data.msg);
						}
						
					},
					error:function(){
						alert('数据库链接配置失败');
						$('#dbpw').focus();
					}
				});
				
				return true;
			}
		});
	});
	</script> 
<!-- footer -->
		</div>
		<div class="footer"> {{.footer_info}} </div>
	</body>
</html>